<template>
	<view class="content">
		<view class="membermanagement paddingbottom8">
			<view class="flex tabs background-f">
				<view class="flex1 text-center tab-items" :class="{'active': index === actived}"
					v-for="(item,index) in tabs" :key="index" @click="changeactive(index)">
					<text style="font-weight: 700;">{{item}}</text>
					<view :class="{'line': index === actived}"></view>
				</view>
			</view>
			<view class="search">
				<uni-easyinput suffixIcon="search" v-model="value" placeholder="请输入内容"
					@iconClick="onClick"></uni-easyinput>
			</view>
			<view class="list">
				<z-paging ref="paging" v-model="dataList" @query="queryList">
					<view class="item background-f borderradius margin8-16 padding16" v-for="(item, index) in dataList"
						:key="index">
						<view class="item-name" style="flex: 0.6;">{{ item.name ? item.name : '未知' }}</view>
						<view class="item-title flex2">
							<view class="item-phone">
								{{ item.phone ? (item.eye ? item.phone : maskedPhoneNumber(item.phone)) : '未知' }}

								<uni-icons class="eye-icon" v-show="item.eye" @click="toggleEye(item)" type="eye-filled"
									size="18"></uni-icons>
								<uni-icons class="eye-icon" v-show="!item.eye" @click="toggleEye(item)"
									type="eye-slash-filled" size="18"></uni-icons>
							</view>
							<view class="item-code">
								{{ item.idCard ?   maskedIdCard(item.idCard) : '未知' }}
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		identityInfoKList
	} from '../../api/work/membermanagement';

	export default {
		data() {
			return {
				actived: 0,
				tabs: ["会员管理", "转出会员", "保留会籍"],
				value: null,
				dataList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,

				},
			}
		},
		methods: {
			// 掩码处理身份证号
			maskedIdCard(idCard) {
				return idCard ? idCard.replace(/^(\d{6})\d+(\d{4})$/, '$1********$2') : '';
			},
			// 掩码处理电话号码
			maskedPhoneNumber(phone) {
				return phone ? phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2') : '';
			},

			// 切换 eye 状态
			toggleEye(item) {
				item.eye = !item.eye;
			},

			onClick() {
				// 搜索触发
				this.$refs.paging.reload();
			},

			changeactive(index) {
				this.actived = index;
				this.$refs.paging.reload();
			},

			queryList(pageNo, pageSize) {
				this.dataList = [];
				identityInfoKList({
					staffInfo: {
						name: this.value
					},
					pageDomain: this.queryParams
				}).then(res => {
					const data = res.data.records.map(item => {
						if (item.staffInfo) {
							return {
								...item.staffInfo,
								eye: false // 默认 eye 为 false
							};
						} else {
							return item;
						}
					});

					console.log(data, "datadatadata");
					this.$refs.paging.complete(data);
				}).catch(() => {
					this.$refs.paging.complete([]);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>

		.membermanagement {
			.tabs {
				font-weight: 500;
				height: 88rpx;
				padding: 20rpx 0;
				padding-bottom: 40rpx;
				margin-bottom: 20rpx;
			}

			.tab-items {
				height: 100%;
			}

			.active {
				color: rgb(189, 26, 45);
			}

			.line {
				border: 3rpx solid rgb(189, 26, 45);
				background-color: rgb(189, 26, 45);
				width: 40rpx;
				border-radius: 3px;
				margin: 10rpx auto;
			}

			.search {
				padding: 0 32rpx;

				::v-deep .is-input-border {
					border-radius: 20px;
					background-color: rgb(189, 26, 45) !important;
					border: 1px solid rgb(189, 26, 45) !important;
				}

				::v-deep .uni-easyinput__content-input {
					border-radius: 17px;
					background-color: #fff !important;
				}

				::v-deep .uniui-search {
					color: #fff !important;
				}
			}

			.list {
				margin-top: -20rpx;
			}

			// .z-paging-content-fixed[data-v-0f887f1e],
			// .zp-loading-fixed[data-v-0f887f1e] {
			// 	position: absolute !important;
			// 	top: 200rpx !important;
			// }

			.item {
				display: flex;

				.item-name {
					color: #333333;
				}

				.item-phone {
					color: #333333;
					margin: 4rpx 0 24rpx 0;
				}

				.item-code {
					font-size: 24rpx;
					color: rgba(102, 102, 102, 1);
				}
			}

	}
</style>